<template>
  <div>
    <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        style="margin-top: 0px; line-height: 10px;margin-left: 25px"
    >
      <el-form-item label="医生姓名">
        <el-input
            v-model="formInline.docName"
            placeholder="医生姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="诊断科室名称">
        <el-select
            v-model="formInline.deptCategoryName"
            placeholder="诊断科室名称"
        >
          <el-option
              v-for="departmentClassification in departmentClassification"
              :key="departmentClassification.deptCategoryName"
              :lable="departmentClassification.deptCategoryName"
              :value="departmentClassification.deptCategoryName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" placeholder="状态">
          <el-option lable="待用户选择" value="待用户选择"></el-option>
          <el-option lable="住院中" value="住院中"></el-option>
          <el-option lable="已出院" value="已出院"></el-option>
          <el-option lable="拒绝住院" value="拒绝住院"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="select">查询</el-button>
        <el-button type="success" plain @click="newRoom">新建病房
        </el-button>
        <el-button type="danger" plain @click="resetForm"
        >重置
        </el-button
        >
      </el-form-item
      >
    </el-form>
    <el-card class="box-card-docView">
      <el-table
          border
          text-align:
          center
          :cell-style="{ padding: '7px' }"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column prop="id" label="病历编号"></el-table-column>
        <el-table-column prop="name" label="病人姓名"></el-table-column>
        <el-table-column prop="gender_name" label="病人性别"></el-table-column>
        <el-table-column prop="data_birth" label="病人年龄"></el-table-column>
        <el-table-column prop="blood" label="病人血型"></el-table-column>
        <el-table-column prop="mobile" label="手机信息"></el-table-column>
        <el-table-column prop="family_mobile" label="家属联系电话"></el-table-column>
        <el-table-column prop="doctor_name" label="负责医生"></el-table-column>
        <el-table-column prop="department_info" label="诊断科室"></el-table-column>
        <el-table-column fixed="right" label="办理住院/拒绝住院" width="170">
          <template slot-scope="scope">
            <el-button
                el-button
                type="primary"
                icon="el-icon-search"
                circle
                @click="InWard(scope.row)"
                size="small">
            </el-button>
            <el-button
                el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="notInWard(scope.row)"
                size="small"
                v-if="user_type === '管理员'"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
        background
        layout="prev, pager, next,total"
        :total=departmentPageDto
        :page-size=filter.size
        style="position: absolute; margin-left: 700px; margin-top: 30px"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user_type: '',
      tableData: [{
        'id':'1',
        'name':'徐炎',
        'gender_name':'男',
        'data_birth':'2',
        'blood':'SB',
        'mobile':'1383838438',
        'family_mobile':'19558253966',
        'doctor_name':'方磊',
        'department_info':'小儿麻痹'

      }],
      user: {},
      formInline: {
        docName: "",
        deptCategoryName: "",
        status: "",
      },
      departmentClassification: [],
      pageTotal: "",
      departmentPageDto: {},
      filter: {
        size: 3,       // 单页数据量
        page: 1,
      },
    };
  },
  created() {
    // 获取所有病人信息
    this.$axios.get(this.$settings.BASE_URL + 'patient/patient_info/').then(response => {
      console.log(response.data)
      this.tableData = response.data.results
      this.departmentPageDto = response.data.count
    })
    this.user_type = this.$getSessionStorage("user_type");
    this.selectDepartmentClassification();
    this.paging(1);
  },
  methods: {
    // newRoom() {
    //   if (this.user_type === '管理员') {
    //     this.$router.push({
    //       path: "/index/newRoom",
    //     });
    //   } else {
    //     alert("很抱歉,您没有权限新建药品");
    //   }
    // },
    newRoom() {
      this.$router.push({
        path: "/index/newRoom",
      });

    },
    select(pageNum) {
      //axios查询待住院列表请求(分页有参)
      if (isNaN(pageNum) == true) {
        pageNum = 1;
      }
      this.$axios
          .post("/hospitalization/selectHospitalizationListByUserAccount", {
            pageNum: pageNum,
            docName: this.formInline.docName,
            deptCategoryName: this.formInline.deptCategoryName,
            status: this.formInline.status,
            userAccount: this.user.name,
          })
          .then((Response) => {
            this.tableData = Response.data.list;
            this.departmentPageDto = Response.data;
            console.log(this.departmentPageDto);
          })
          .catch((error) => {
            console.error(error);
          });
    },
    handleSelectionChange(val) {
      this.select(pageNumber);
    },
    resetForm() {
      location.reload();
    },
    paging(pageNum) {
      //axios查询待住院列表请求(分页无参)
      this.$axios
          .post("/hospitalization/selectHospitalizationListByUserAccount", {
            pageNum: pageNum,
            userAccount: this.user.name,
          })
          .then((Response) => {
            this.tableData = Response.data.list;
            this.departmentPageDto = Response.data;
            console.log(this.departmentPageDto);
          })
          .catch((error) => {
            console.error(error);
          });
    },
    handleCurrentChange(pageNumber) {
      this.select(pageNumber);
    },
    selectDepartmentClassification() {
      //axios查询科室分类请求
      this.$axios
          .post("/department/selectDepartmentClassification")
          .then((Response) => {
            this.departmentClassification = Response.data;
            console.log(this.departmentClassification);
          })
          .catch((error) => {
            console.error(error);
          });
    },
    notInWard(row) {
      this.$confirm("确认拒绝住院？")
          .then((_) => {
            //axios拒绝住院请求
            this.$axios.delete(this.$settings.BASE_URL + `patient/patient_info/${row.id}`).then(response => {
              this.$message({
                message: '拒绝住院成功，祝身体健康',
                type: 'success',
                duration: 1000
              })
            }).catch((error) => {
              this.$message({
                message: error,
                type: 'warning',
                duration: 1000
              })
            });
          })
          .catch((_) => {
          });
    },
    InWard(row) {
      this.$confirm("确认前往住院办理？")
          .then((_) => {
            // row是拿到的是表格中对应行的数据
            this.$router.push({
              path: "/index/toInWard",
              query: {row: row},
            });
          })
          .catch((_) => {
          });
    },
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card-docView {
  margin-top: 0px;
  width: 100%;
}
</style>